<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Utility component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
        <style type="text/css">

            /*
             * Responsive utility classes
             */

            .tm-test .uk-panel {
                position: relative;
                padding: 10px;
                border: 1px solid #ddd;
                background: #f0f0f0;
                text-align: center;
            }

            .tm-test .uk-panel > span {
                position: absolute;
                left: -1px;
                right: -1px;
                top: -1px;
                bottom: -1px;
                padding: 10px;
            }

            .tm-test-visible .uk-panel > span {
                border: 1px solid #D6E9C6;
                background: #DFF0D8;
                color: #468847;
            }

            .tm-test-hidden .uk-panel {
                border: 1px solid #F1C1B6;
                background: #F7CFCC;
                color: #d85030;
            }

            .tm-test-hidden .uk-panel > span {
                border: 1px solid #ddd;
                background: #f0f0f0;
                color: #444;
            }

        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Alignment</h1>

            <p class="uk-clearfix"><img class="uk-align-medium-right" src="holder.js/400x150/auto" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p class="uk-clearfix"><img class="uk-align-right" src="holder.js/200x100/auto" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p class="uk-clearfix"><img class="uk-align-center" src="holder.js/400x150/auto" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <h1>Vertical alignment</h1>

            <div class="uk-grid uk-margin" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">
                    <div class="uk-text-center uk-vertical-align" style="height: 200px; background: #f0f0f0;">
                        <div class="uk-vertical-align-middle" style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                    </div>
                </div>
                <div class="uk-width-medium-1-2">
                    <div class="uk-text-center uk-vertical-align" style="height: 200px; background: #f0f0f0;">
                        <div class="uk-vertical-align-bottom" style="width: 300px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                    </div>
                </div>
            </div>

            <h1>Respsonsive width and height</h1>
            <p><video controls class="uk-responsive-width" width="600" height="350"></video></p>
            <p><audio controls class="uk-responsive-width"></audio></p>
            <p style="height: 50px; "><img class="uk-responsive-height" src="holder.js/400x150/auto" alt=""></p>

            <h1 class="uk-heading-large">Heading large</h1>

            <h1 class="uk-link-muted"><a href="">Link muted</a></h1>

            <ul class="uk-list uk-width-medium-1-4 uk-link-muted">
                <li><a href="">List item 1</a></li>
                <li><a href="">List item 2</a></li>
                <li><a href="">List item 3</a></li>
                <li><a href="">List item 3</a></li>
            </ul>

            <h1>Scrollable text</h1>

<pre class="uk-scrollable-text uk-width-medium-1-2"><code>&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

            <h1>Scrollable box</h1>

            <div class="uk-scrollable-box uk-width-medium-1-2">
                <ul class="uk-list">
                    <li><label><input type="checkbox"> Category 1</label></li>
                    <li>
                        <label><input type="checkbox"> Category 2</label>
                        <ul>
                            <li><label><input type="checkbox"> Category 2.1</label></li>
                            <li><label><input type="checkbox"> Category 2.2</label></li>
                            <li>
                                <label><input type="checkbox"> Category 2.3</label>
                                <ul>
                                    <li><label><input type="checkbox"> Category 2.3.1</label></li>
                                    <li><label><input type="checkbox"> Category 2.3.2</label></li>
                                </ul>
                            </li>
                            <li><label><input type="checkbox"> Category 2.4</label></li>
                        </ul>
                    </li>
                    <li><label><input type="checkbox"> Category 3</label></li>
                    <li><label><input type="checkbox"> Category 4</label></li>
                </ul>
            </div>

            <h1>Overflow container</h1>

            <div class="uk-overflow-container">
                <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
                    <thead>
                        <tr>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                            <th>Table Heading</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                            <td>Table Footer</td>
                        </tr>
                    </tfoot>
                    <tbody>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                        <tr>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                            <td>Table Data</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h1>Visibility</h1>

            <ul class="uk-list uk-grid uk-text-center tm-test tm-test-visible">
                <li class="uk-width-1-3"><div class="uk-panel">Small<br>(Phone)<span class="uk-visible-small">✔ Small<br>(Phone)</span></div></li>
                <li class="uk-width-1-3"><div class="uk-panel">Medium<br>(Tablet)<span class="uk-visible-medium">✔ Medium<br>(Tablet)</span></div></li>
                <li class="uk-width-1-3"><div class="uk-panel">Large<br>(Desktop)<span class="uk-visible-large">✔ Large<br>(Desktop)</span></div></li>
            </ul>
            <ul class="uk-list uk-grid uk-text-center tm-test tm-test-hidden">
                <li class="uk-width-1-3"><div class="uk-panel">✔ Small<br>(Phone)<span class="uk-hidden-small">Small<br>(Phone)</span></div></li>
                <li class="uk-width-1-3"><div class="uk-panel">✔ Medium<br>(Tablet)<span class="uk-hidden-medium">Medium<br>(Tablet)</span></div></li>
                <li class="uk-width-1-3"><div class="uk-panel">✔ Large<br>(Desktop)<span class="uk-hidden-large">Large<br>(Desktop)</span></div></li>
            </ul>

            <h2>Visible on hover</h2>
            <div class="uk-visible-hover uk-margin uk-clearfix">
                <div class="uk-float-left">Hover me...</div>
                <div class="uk-hidden">Bazinga!</div>
            </div>
            <div class="uk-visible-hover-inline uk-margin">Hover me... <div class="uk-hidden">Bazinga!</div></div>

            <h1>Auto margins</h1>

            <p data-uk-margin>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
                <button class="uk-button">Button</button>
            </p>

        </div>

    </body>
</html>